<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body, div {
	padding: 10px
}

div {
	border: 1px solid #777;
}

body>div:nth-child(1) {
	float: left;
	width: 35%
}

body>div:nth-child(2) {
	float: right;
	width: 60%
}
li{
	padding: 2px
}
li:hover{
	background-color: #888;
	color: #fff;
}
li>*:nth-child(2),li>*:nth-child(3){
	float: right;
}
li>span{
	width:60%;
}
li>input{
	width:30%
}
h1{
	background-color: #eee
}
#d1{
	height: 300px;
	background-color: #ddd;
	overflow: auto;
}
#d2{
	width: 60%;
	height: 150px;
	color: blue;
	background-color: rgba(0,255,0,0.5);
	overflow: auto;
}

</style>
</head>
<body>
	<div>
		<h1>元素定位</h1>
		<div id="d1">
		<p style="background: #999">前面的内容</p>
		<div id="d2">
CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
<h4>文档流</h4>
<ol>
<li>文档流: 窗体自上而下分成一行一行，并在每行中按从左至右的顺序排放元素；
<li>每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端，若当前行容不下，则另起新行再浮动；
<li>内联元素也不会独占一行，几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素；
<li>有三种情况将使得元素脱离文档流而存在，分别是 float，absolute ，fixed
</ol>
<h4>position</h4>
<ol>
<li><b>static:</b> 该值是position的默认值, 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。
<li><b>relative:</b> 该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
<li><b>absolute:</b> 不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并
<li><b>fixed:</b> 不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置
</ol>
		</div>
		<p style="background: #aaa">后面的内容</p>
		</div>
	</div>
	<div id="lx">
		<h2>请按照要求完成对左边的<font color="green">绿色的DIV</font>的样式进行修改</h2>
		<ol>
			<li v-for="(q,index) in qlist">
				<span>{{q.name}}</span>:
				<img v-bind:style="q" src="OK.png" width="20px" >
				<input v-bind:answer="q.answer" placeholder="请填写样式，例：color:green"

					v-on:click="a(q)"
					v-on:onmouseover="answer(q)"
					v-bind:value="q.answer">
			</li>
		</ol>
	</div>

	<script type="text/javascript">
		var qlist=[
			{name:'设置 position 为 relative',answer:'position:relative', visibility:'hidden',msg:"燃鹅, 并没什么X用....\r\n别灰心, 继续...."},
			{name:'设置 left 为 30 px',answer:'left:30px', visibility:'hidden'},
			{name:'设置 left 为 30 %',answer:'left:30%', visibility:'hidden'},
			{name:'设置 left 为 -30 px',answer:'left:-30px', visibility:'hidden'},
			{name:'设置 top为 50 px',answer:'top:50px', visibility:'hidden'},
			{name:'设置 top为 50 %',answer:'top:50%', visibility:'hidden'},
			{name:'设置 top为 -50 px',answer:'top:-50px', visibility:'hidden'},
			{name:'设置 right 为 -30 px',answer:'right:-30px', visibility:'hidden',msg:"这样设置 right 是不行的, 因为设置了 left,\r\n 必须还原 left 为默认值"},
			{name:'设置 left 为 auto',answer:'left:auto', visibility:'hidden'},
			{name:'设置 bottom 为 -40 px',answer:'bottom:-40px', visibility:'hidden',msg:"这样设置 bottom 是不行的, 因为设置了 top,\r\n 必须还原 top 为默认值"},
			{name:'设置 top 为 auto',answer:'top:auto', visibility:'hidden'},

			{name:'恢复初始位置, 设置 position 为 static',answer:'position:static', visibility:'hidden'},
			{name:'恢复初始位置, 设置 left为 auto',answer:'left:auto', visibility:'hidden'},
			{name:'恢复初始位置, 设置 top为 auto',answer:'top:auto', visibility:'hidden'},
			{name:'恢复初始位置, 设置 bottom 为 auto',answer:'bottom:auto', visibility:'hidden'},
			{name:'恢复初始位置, 设置 right 为 auto',answer:'right:auto', visibility:'hidden'},

			{name:'设置 position 为 absolute',answer:'position:absolute', visibility:'hidden'},
			{name:'设置 left为 30 px',answer:'left:30px', visibility:'hidden'},
			{name:'设置 left为 -40 px',answer:'left:-40px', visibility:'hidden'},
			{name:'设置 left为 30 %',answer:'left:30%', visibility:'hidden'},
			{name:'设置 top为 50 px',answer:'top:50px', visibility:'hidden'},
			{name:'设置 top为 50 %',answer:'top:50%', visibility:'hidden'},
			{name:'设置 top为 -60 px',answer:'top:-60px', visibility:'hidden'},
			{name:'恢复初始位置, 设置 left为 auto',answer:'left:auto', visibility:'hidden'},
			{name:'恢复初始位置, 设置 top为 auto',answer:'top:auto', visibility:'hidden'},
			{name:'设置 right为 30 px',answer:'right:30px', visibility:'hidden'},
			{name:'设置 bottom 为 -40 px',answer:'bottom:-40px', visibility:'hidden'},

			{name:'恢复初始位置, 设置 position 为 static',answer:'position:static', visibility:'hidden'},
			{name:'恢复初始位置, 设置 top为 auto',answer:'top:auto', visibility:'hidden'},
			{name:'恢复初始位置, 设置 bottom 为 auto',answer:'bottom:auto', visibility:'hidden'},

			{name:'设置 position 为 fixed',answer:'position:fixed', visibility:'hidden',msg:"哈哈, 尝试着上下滚动下网页, 看看 fixed 带来的变化"},
			{name:'设置 left为 30 px',answer:'left:30px', visibility:'hidden'},
			{name:'设置 left为 -40 px',answer:'left:-40px', visibility:'hidden'},
			{name:'设置 left为 30 %',answer:'left:30%', visibility:'hidden'},
			{name:'设置 top为 50 px',answer:'top:50px', visibility:'hidden'},
			{name:'设置 top为 50 %',answer:'top:50%', visibility:'hidden'},
			{name:'设置 top为 -60 px',answer:'top:-60px', visibility:'hidden'},
			{name:'恢复初始位置, 设置 left为 auto',answer:'left:auto', visibility:'hidden'},
			{name:'恢复初始位置, 设置 top为 auto',answer:'top:auto', visibility:'hidden'},
			{name:'设置 right为 30 px',answer:'right:30px', visibility:'hidden'},
			{name:'设置 bottom 为 -40 px',answer:'bottom:-40px', visibility:'hidden'},
			];

		var lx = new Vue({
			el : '#lx',
			data : {
				qlist:qlist,
			},
			methods:{
				answer: function(q){
					if(event.srcElement.value){
						var a1 = event.srcElement.value;
						var a2 = q.answer;
						var arr = a1.split(":");
						$("#d2").css(arr[0],arr[1]);
						a1 = a1.replace(/\s+/g, '');
						a2 = a2.replace(/\s+/g, '');
						a1 = a1.toLowerCase();
						a2 = a2.toLowerCase();
						q.visibility = a1 == a2 ? 'visible':'hidden';
						console.log(q.visibility);
						if(a1==a2 && q.msg){
							alert(q.msg);
						}
					}
				},
				a: function(q){
					if(event.altKey){
						event.srcElement.value = q.answer;
						this.$options.methods.answer(q);
					}
				}
			}
		})

	</script>
</body>
</html>
